<template>
    <div class="padding-container">
        <!-- 按钮标签 -->
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>Buttons</span>
            </div>
            <div class="items">
                <el-row>
                    <div v-for="item of types" :key="item" @click="handleClipboard(generateButtonCode(item), $event)">
                        <el-tooltip placement="top">
                            <div slot="content">
                                {{ generateButtonCode(item) }}
                            </div>
                            <div class="icon-item">
                                <svg-icon :icon-class="item" class-name="disabled" />
                                <span>
                                    <el-button :type='item' plain size="medium">{{ item }}</el-button>
                                </span>
                            </div>
                        </el-tooltip>
                    </div>
                </el-row>
            </div>
        </el-card>
        <!-- tag标签 -->
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>Tags</span>
            </div>
            <div class="items">
                <el-row>
                    <div v-for="item of types" :key="item" @click="handleClipboard(generateTagsCode(item), $event)">
                        <el-tooltip placement="top" v-if="item !=='default'">
                            <div slot="content">
                                {{ generateButtonCode(item) }}
                            </div>
                            <div class="icon-item">
                                <svg-icon :icon-class="item" class-name="disabled" />
                                <span>
                                    <el-tag :type='item' plain size="medium">{{ item }}</el-tag>
                                </span>
                            </div>
                        </el-tooltip>
                    </div>
                </el-row>
            </div>

        </el-card>
    </div>
</template>

<script>
import clipboard from '@/utils/clipboard'
export default {
    data() {
        return {
            types: [
                'default',
                'primary',
                'success',
                'info',
                'warning',
                'danger',
            ]
        }
    },
    methods: {
        generateButtonCode(type) {
            return `<el-button type='${type}' plain size="medium"> ${type} </el-button>`
        },
        generateTagsCode(type) {
            return `<el-tag type='${type}' plain size="medium"> ${type} </el-tag>`
        },
        // 复制
        handleClipboard(text, event) {
            clipboard(text, event)
        },
    }
}
</script>

<style scoped>
.items div {
    display: inline;
}
</style>